<template>
  <div>
    <el-table :border="true" :data="tableData" style="width: 100%">
      <el-table-column fixed prop="id" label="id" min-width="150" />
      <el-table-column fixed prop="phone" label="装备名称" min-width="150" />
      <el-table-column prop="nick" label="装备型号" min-width="120" />
      <el-table-column prop="sex" label="维修原因" min-width="120" />
      <el-table-column prop="szdq" label="维修人员" min-width="120" />
      <el-table-column prop="zt" label="维修时间" min-width="120" />
      <el-table-column prop="zt1" label="当前状态" min-width="120" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scoped">
          <el-popconfirm title="确定完成吗?" @confirm="confirm(scoped.row)">
            <template #reference>
              <el-button link type="primary" size="small">完成</el-button>
            </template>
          </el-popconfirm>

          <el-button link type="primary" size="small" @click="del(scoped.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogTableVisible" width="500">
      <div class="dialog-flex">
        <el-input
          v-model="textarea"
          maxlength="30"
          style="width: 440px"
          placeholder="请输入"
          show-word-limit
          type="textarea"
        />
        <div class="dialog-button">
          <el-button
            type="primary"
            @click="
              () => {
                dialogTableVisible = false;
              }
            "
            >保存</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog v-model="dialogEdit" title="编辑库存" width="400">
      <div class="form">
        <div class="form-item">
          <span class="title">总库存</span>
          <div class="content">
            <el-input
              v-model="form.sex"
              style="width: 240px"
              placeholder="名称"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">可用数</span>
          <div class="content">
            <el-input
              v-model="form.szdq"
              style="width: 240px"
              placeholder="型号"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">状态</span>
          <div class="content">
            <el-input
              v-model="form.zt"
              style="width: 240px"
              placeholder="编号"
            />
          </div>
        </div>
        <div class="form-handle">
          <el-button type="primary" @click="saveEdit">确定</el-button>
          <el-button type="primary" @click="dialogEdit = false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog v-model="dialogVisible" title="聊天记录" width="600px">
      <!-- 聊天内容 -->
      <div
        v-for="(message, index) in paginatedMessages"
        :key="index"
        class="chat-message"
      >
        <p>
          <strong>{{ message.user }}：</strong> {{ message.content }}
        </p>
      </div>

      <!-- 分页控件 -->
      <el-pagination
        v-model:current-page="currentPage"
        layout="prev, pager, next"
        :total="chatMessages.length"
        :page-size="messagesPerPage"
        @current-change="handlePageChange"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";
const dialogTableVisible = ref(false);
const textarea = ref("");
const handleClick = () => {
  dialogTableVisible.value = true;
};
function confirm(row) {
  setTimeout(() => {
    row.zt1 = "维修完成";
    ElMessage({
      message: "成功",
      type: "success"
    });
  }, 500);
}
const form = ref({
  sex: "",
  szdq: "",
  zt: ""
});
const tableData = ref([
  {
    id: 1,
    phone: "棒子",
    nick: "s400",
    sex: "长屎了",
    szdq: "张碰",
    zt: "2024-01-01",
    zt1: "维修未完成",
    _tableData: [
      {
        hhlr: "今天吃啥子呢",
        wtlx: "生活科学",
        cljg: "已完成",
        clsc: "15分钟"
      },
      { hhlr: "mRna的解析", wtlx: "科学", cljg: "未完成", clsc: "超过20分钟" }
    ]
  },
  {
    id: 2,
    phone: "帽子",
    nick: "h20",
    sex: "破了",
    szdq: "陈洗",
    zt: "2024-03-01",
    zt1: "维修未完成",
    _tableData: [
      {
        hhlr: "今天吃啥子呢",
        wtlx: "生活科学",
        cljg: "已完成",
        clsc: "15分钟"
      },
      { hhlr: "mRna的解析", wtlx: "科学", cljg: "未完成", clsc: "超过20分钟" }
    ]
  }
]);

const dialogVisible = ref(false);
const currentPage = ref(1);
const messagesPerPage = 5;

function del(row) {
  let rowIndex = tableData.value.findIndex(i => i.id === row.id);
  setTimeout(() => {
    tableData.value.splice(rowIndex, 1);
    ElMessage({
      message: "删除成功",
      type: "success"
    });
  }, 500);
}
const dialogEdit = ref(false);
function edit(row) {
  dialogEdit.value = true;
  form.value = row;
}

// 聊天记录示例数据
const chatMessages = ref([
  { user: "用户狗子", content: "今天吃啥呢？" },
  { user: "AI", content: "吃狗屎" },
  { user: "用户狗子", content: "吃不下一点" },
  { user: "AI", content: "那吃猫屎" },
  { user: "用户狗子", content: "你先吃试试你先吃试试你先吃试试……" },
  { user: "AI", content: "滚" },
  { user: "用户狗子", content: "大SBSBSBSB" }
  // 更多的聊天记录可以继续添加
]);

// 计算当前页的数据
const paginatedMessages = computed(() => {
  const start = (currentPage.value - 1) * messagesPerPage;
  const end = start + messagesPerPage;
  return chatMessages.value.slice(start, end);
});

// 页码变化处理
const handlePageChange = page => {
  currentPage.value = page;
};

// 关闭弹层时的处理
const handleClose = () => {
  currentPage.value = 1;
};

function saveEdit() {
  setTimeout(() => {
    ElMessage({
      message: "编辑成功",
      type: "success"
    });
    dialogEdit.value = false;
  }, 500);
}
</script>

<style lang="scss" scoped>
.dialog-button {
  margin-top: 16px;
}
.chat-message {
  margin-bottom: 12px;
}
.form {
  // display: grid;
  // grid-template-columns: repeat(2, 1fr); /* 定义两列，每列占用一半宽度 */
  // gap: 10px; /* 项目之间的间距 */
  .form-handle {
    margin-top: 12px;
    grid-column: span 2;
    display: flex;
    justify-content: end;
  }
}
</style>
